<template>
    <div>
        index

        id：{{ $route.query.id }}

        <router-link to="/content?id=100&title=查询字符串">查询字符串传参</router-link><br>
        <router-link to="/user/0098/name/路径传参">路径传参</router-link><br>

        <router-link :to="{ path: '/content', query: {id: 200, title: 'vue3'} }">查询字符串传参 - 动态属性绑定</router-link><br>
        <router-link :to="{ name: 'member', params: {id: 300, name: 'vue2'} }">查询字符串传参 - 动态属性绑定</router-link>

        <button @click="goTo()">编程式导航</button>
        <p>count: {{ counter.count }}</p>
        <p>Double: {{ counter.doubleCount }}</p>
        <button @click="counter.increment()">Increment</button>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter';

const counter = useCounterStore() // 获取 Store 实例

const router = useRouter()

const goTo = () => {
    router.push('/content?id=100&title=查询字符串')
}

</script>

<style scoped>
 
</style>